import React from 'react';
import ReactNative, {
  View,
  Image,
  Text,
  ListView,
  TextInput,
  Button,
  TouchableOpacity,
  Keyboard,
  ScrollView,
  Alert,
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import ToastUtils from '../../common/ToastUtils';
import dismissKeyboard from 'dismissKeyboard';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import CommonCallTellAction from '../../actions/common/CommonCallTellAction';
import CreateConsultAction from '../../actions/heart/CreateConsultAction';


export default class HeartConsultPage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      contact_way: "",
      question: "",
      viewStatus: 1,
      keyboardHeight:0,
      };

   this.state.expertData = this.props.pageData.routeData;
    this._sendRequest = false;
    this._goEdit = false;
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }


  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  componentWillUpdate(nextProps, nextStates) {
    if(nextStates.viewStatus == 3 && this._sendRequest) {
      new CommonShowViewFullScreenAction().call(this, null);
      this._resetState();
      this._sendRequest = false;
      Alert.alert('提示','预约成功静候专家回电',[
          {text:'确定',onPress:()=>{this.goBack()}}
        ])
    }
    else if(nextStates.viewStatus == 4 && this._sendRequest) {
      this._sendRequest = false;
      nextStates.viewStatus = 1;
      Alert.alert('提示','预约失败',[
          {text:'确定'}
        ])
    }
    return true;
  }

    _dealEnterPage() {
    if(this.state.expertData != this.props.pageData.routeData){
      this.state.expertData = this.props.pageData.routeData;
    }
  }

   _dealLeavePage() {
    if(this._goEdit === true) {
      return;
    }
    this._resetState();
  }

  _resetState() {
    this.setState({
      name: "",
      contact_way: "",
      question: "",
    })
  }

  _keyboardDidShow(e){
    if(e.startCoordinates){
         this.setState({
          keyboardHeight:e.startCoordinates.height,
      }, ()=> {
        // this._scrollToEnd();
      })
    }else if(e.endCoordinates){
        this.setState({
          keyboardHeight:e.endCoordinates.height,
      }, ()=> {
        // this._scrollToEnd();
      })
    }

  }

  _keyboardDidHide(e){
      this.setState({
          keyboardHeight:0
      }, ()=> {
        setTimeout(()=>{
          this._scrollView.scrollTo({y: 0});
        },500);
      })
  }

  _scrollViewTo(scrollLength){
    this._scrollView.scrollTo(SizeUtils.translateDesignHeightToCode(scrollLength));
　}

  _listItemRender(rowData){
    return(
        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:rowData.bbWidth,width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>{rowData.title}：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(32)}}
                  onChangeText = {(name) => this.setState({name})}
                />
                  {/*onFocus = {this._scrollViewTo.bind(this)}*/}

            </View>
        </View>
    )
  }

  _itemName(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>姓名：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
              justifyContent: 'center',
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45)}}
                  onChangeText = {(name) => this.setState({name})}
                  underlineColorAndroid="transparent"
                  value = {this.state.name}
                  onFocus = {this._scrollViewTo.bind(this, 0)}
                />
            </View>
        </View>
    )
  }

  _itemWay(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>联系方式：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45),fontSize: SizeUtils.translateFontSizeToCode(32)}}
                  onChangeText = {(contact_way) => this.setState({contact_way})}
                  underlineColorAndroid="transparent"
                  value = {this.state.contact_way}
                  maxLength={11}
                  keyboardType="numeric"
                  keyboardAppearance="dark"
                  onFocus = {this._scrollViewTo.bind(this, 116)}
                />
            </View>
        </View>
    )
  }

  _itemExpert(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>咨询师：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
            <Text style={{borderWidth:0,padding:0,fontSize: SizeUtils.translateFontSizeToCode(32)}}>{this.state.expertData.name}</Text>
            </View>
        </View>
    )
  }

  _itemQuestion(){
    return(
      <View style={{
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{
                flexWrap: 'nowrap',
                height: SizeUtils.translateDesignHeightToCode(32), }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>问题：</Text>
            </View>
            <TouchableOpacity style={{backgroundColor:"#ffffff", width:SizeUtils.translateDesignWidthToCode(670),
                marginTop:SizeUtils.translateDesignHeightToCode(44), borderColor:"#eeeeee",
                borderWidth:SizeUtils.translateDesignNumToCode(3)}} onPress={this._onPressUploadText.bind(this)}>
              <Text style={{color:this.state.question === "" ? "#cacacc" : "#999999",
                  fontSize:SizeUtils.translateFontSizeToCode(30),
                  padding:SizeUtils.translateDesignHeightToCode(20),
                  height:SizeUtils.translateDesignHeightToCode(550), }}>
                  {this.state.question === "" ? "请输入你的咨询的问题" : this.state.question}
              </Text>
            </TouchableOpacity>
        </View>
    )
  }

    _onPressUploadText() {
    this._goEdit = true;
    this.gotoPage(Config.pages.common_input, {placeholder:"请输入你的咨询的问题", length:[10, 500],
      callback:this._editUploadText.bind(this), title:"问题"});
  }

  _editUploadText(value) {
    this._goEdit = false;
    this.setState({
      question:value,
    })
  }

  _onPressSubmit(){
    if(this.state.name === ""){
       ToastUtils.show("请输入姓名");
    }
    else if(this.state.contact_way === ""){
       ToastUtils.show("请输入联系方式");
    }
    else if(this.state.question === ""){
       ToastUtils.show("请输入问题");
    }
    else {
      this._callCreateSuggest()
    }
  }

  _callCreateSuggest() {
    new CreateConsultAction().call(this, {
      name: this.state.name,
      contact_way: this.state.contact_way,
      question: this.state.question,
      expert_id:this.state.expertData.expert_id,});
    this._sendRequest = true;
  }

  _onPressCall() {
    new CommonCallTellAction().call(this, this.state.expertData.phone);
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().height,
         paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(20),
         alignItems: 'center', backgroundColor:"#ffffff"}}>
         {this._renderNavigationBar()}
         <ScrollView style={{width:SizeUtils.getWindowSize().width,
          }} ref={(ref) => this._scrollView = ref}>
            <View style={{flexDirection: 'column',alignItems: "center", backgroundColor:"#ffffff",
              width:SizeUtils.getWindowSize().width,
            }}>
            {this._itemName()}
            {this._itemWay()}
            {this._itemExpert()}
            {this._itemQuestion()}
          </View>
         </ScrollView>
         {this._renderBottom()}
      </View>
    )
  }

  _renderBottom() {
    // this.state.expertData.mobile = 10086;
    var bottomHeight = this.state.expertData.phone ? 210 : 100;
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignHeightToCode(bottomHeight)}}>
        <TouchableOpacity
         style={{
           width:SizeUtils.getWindowSize().width,
           backgroundColor: '#D93338',
           height:SizeUtils.translateDesignHeightToCode(100),
           flexDirection:"row", alignItems:"center", justifyContent:"center",
         }}
         onPress={this._onPressSubmit.bind(this)}
        >
          <Text style={{
             textAlign: 'center',
             color: '#ffffff',
             fontSize:SizeUtils.translateFontSizeToCode(32),
           }}>预约咨询</Text>
        </TouchableOpacity>
        {this._renderCallView()}
      </View>
    )
  }

  _renderCallView() {
    if(this.state.expertData.phone) {
        return(
          <TouchableOpacity
              style={{
                width:SizeUtils.getWindowSize().width,
                backgroundColor: '#D93338',
                height:SizeUtils.translateDesignHeightToCode(100),
                marginTop:SizeUtils.translateDesignHeightToCode(10),
                flexDirection:"row",
                justifyContent:"center",
                alignItems:"center",
              }}
              onPress={this._onPressCall.bind(this)}
             >
               <Text style={{
                  textAlign: 'center',
                  color: '#ffffff',
                  fontSize:SizeUtils.translateFontSizeToCode(32),
                }}>
                {"直接拨打电话"}
              </Text>
          </TouchableOpacity>
        )
    }
  }
}
